<div style="background-color:#FFFFFF;height: 225px;width: 100%;" id="Info">
	<div style="width: 100%;overflow: hidden;">
		<div class="topInfo">
			<div class="topInfo-radiu" style="background-color: #737eac;">
				<i class="fa fa-users"></i>
			</div>
			<div class="topInfo-text">
				<div style="color: #acacac;">区县排名</div>
				<div style="font-size: 20px;" id="order">暂无</div>
			</div>
		</div>
		<div class="topInfo">
			<div class="topInfo-radiu" style="background-color: #79ca52;">
				<i class="fa fa-bars"></i>
			</div>
			<div class="topInfo-text">
				<div style="color: #acacac;">签约数</div>
				<div style="font-size: 20px;" id="signcount">暂无</div>
			</div>
		</div>
		<div class="topInfo">
			<div class="topInfo-radiu" style="background-color: #3eaeee;">
				<i class="fa fa-plus-circle"></i>
			</div>
			<div class="topInfo-text">
				<div style="color: #acacac;">新增商铺数</div>
				<div style="font-size: 20px;" id="count">暂无</div>
			</div>
		</div>
		<div class="topInfo">
			<div class="topInfo-radiu" style="background-color: #505a64;">
				<i class="fa fa-briefcase"></i>
			</div>
			<div class="topInfo-text">
				<div style="color: #acacac;">拜访数</div>
				<div style="font-size: 20px;" id="vistcount">暂无</div>
			</div>
		</div>
		<div class="topInfo">
			<div class="topInfo-radiu" style="background-color: #3cbeb2;">
				<i class="fa fa-random"></i>
			</div>
			<div class="topInfo-text">
				<div style="color: #acacac;">楼宇数</div>
				<div style="font-size: 20px;" id="buildingcount">暂无</div>
			</div>
		</div>
	</div>
	<div style="width: 100%;overflow: hidden;">
		<div class="topInfo">
			<div class="topInfo-radiu" style="background-color: #737eac;">
				<i class="fa fa-sitemap"></i>
			</div>
			<div class="topInfo-text">
				<div style="color: #acacac;">商客经理数</div>
				<div style="font-size: 20px;" id="totalUser">暂无</div>
			</div>
		</div>
		<div class="topInfo">
			<div class="topInfo-radiu" style="background-color: #79ca52;">
				<i class="fa fa-microchip"></i>
			</div>
			<div class="topInfo-text">
				<div style="color: #acacac;">使用数</div>
				<div style="font-size: 20px;" id="mangercount">暂无</div>

			</div>
		</div>
		<div class="topInfo">
			<div class="topInfo-radiu" style="background-color: #3eaeee;">
				<i class="fa fa-wifi"></i>
			</div>
			<div class="topInfo-text">
				<div style="color: #acacac;">资源覆盖楼宇数</div>
				<div style="font-size: 20px;" id="sourcebuildingcount">暂无</div>
			</div>
		</div>
		<div class="topInfo">
			<div class="topInfo-radiu" style="background-color: #505a64;">
				<i class="fa fa-list-alt"></i>
			</div>
			<div class="topInfo-text">
				<div style="color: #acacac;">已签约楼宇数</div>
				<div style="font-size: 20px;" id="signbuildingcount">暂无</div>
			</div>
		</div>
		<div class="topInfo">
			<div class="topInfo-radiu" style="background-color: #3cbeb2;">
				<i class="fa fa-home"></i>
			</div>
			<div class="topInfo-text">
				<div style="color: #acacac;">酒店数</div>
				<div style="font-size: 20px;" id="hotelcount">暂无</div>
			</div>
		</div>
	</div>
	<div style="width: 100%;overflow: hidden;">
		<div class="topInfo">
			<div class="topInfo-radiu" style="background-color: #737eac;">
				<i class="fa fa-tag"></i>
			</div>
			<div class="topInfo-text">
				<div style="color: #acacac;">资源覆盖酒店数</div>
				<div style="font-size: 20px;" id="sourcehotelcount">暂无</div>
			</div>
		</div>
		<div class="topInfo">
			<div class="topInfo-radiu" style="background-color: #79ca52;">
				<i class="fa fa-university"></i>
			</div>
			<div class="topInfo-text">
				<div style="color: #acacac;">已签约酒店数</div>
				<div style="font-size: 20px;" id="signhotelcount">暂无</div>
			</div>
		</div>
		<div class="topInfo">
			<div class="topInfo-radiu" style="background-color: #3eaeee;">
				<i class="fa fa-thumb-tack"></i>
			</div>
			<div class="topInfo-text">
				<div style="color: #acacac;">房间总数</div>
				<div style="font-size: 20px;" id="hotelRooms">暂无</div>
			</div>
		</div>
		<div class="topInfo">
			<div class="topInfo-radiu" style="background-color: #505a64;">
				<i class="fa fa-paperclip "></i>
			</div>
			<div class="topInfo-text">
				<div style="color: #acacac;">已签约房间数</div>
				<div style="font-size: 20px;" id="hotelSignRooms">暂无</div>
			</div>
		</div>
	</div>
</div>
<div style="background-color:#FFFFFF;width: 100%;height: 30px;text-align: center;" id="show">
	<span onclick="showMapInfo('0')" style='color: #5FB9F4;cursor: pointer;'>
			<i class='fa fa-arrow-circle-up' style="margin-right: 10px"></i>收起</span>
</div>

<div style="margin-top: 15px; overflow: hidden;background-color: #FFFFFF;">
	<div class="map" id="mapBox">
		<div class="map_float_box " id="mapInput">
			<input type="text" id="searchinfo" placeholder="商铺名称、地址" />
			<span class="search" onclick="Search()"><i class="fa fa-search"></i></span>
		</div>
		<div class="map_float_box_right" id="mapSearch">
			<div class="panel-group" id="accordion" style="margin-bottom: 0px;">
				<div class="panel panel-default" style="background: none !important;width: 230px;border:none;">
					<div class="panel-heading" style="width: 110px;border-bottom: 1px solid #C0C0C0;">
						<h4 class="panel-title" style="padding-top: 0px;font-size: 14px;">
						<a onclick="changeSpan()" data-toggle="collapse"  data-parent="#accordion"  href="#collapseThree" style="text-decoration:none;">
							行业类别&nbsp;&nbsp;<span><i id="iconspan" class="fa fa-sort-asc"></i></span>
						</a>
					</h4>

					</div>
					<div id="collapseThree" class="panel-collapse collapse" style="background: #FFFFFF;">
						<div class="panel-body" style="border: none;padding: 5px;">
							<ul id="shopType" style="overflow: hidden;padding-left:0px ;">
								<li><input type="checkbox" value="宾馆酒店" /> 宾馆酒店</li>
								<li><input type="checkbox" value="楼宇园区" /> 楼宇园区</li>
								<li><input type="checkbox" value="连锁集团" /> 连锁集团</li>
								<li><input type="checkbox" value="快递" /> 快递</li>
								<li><input type="checkbox" value="网吧" /> 网吧</li>
							</ul>
							<div style="height: 40px;border-top: 1px solid #C0C0C0;">
								<a class="btn btn-serch" style="float: right;margin-top: 7px;" onclick="SearchType()"> <i class="fa fa-search"></i> 查 询</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="map" id="map"></div>
	</div>
</div>
<script>
	//地图加载
	var map = new BMap.Map("map", {}); // 创建Map实例

	$(function() {
		
		showMapInfo(0);
		GetWeekInfo();
		$("#shopInfolist").hide();
		//标注所有商铺
		var myGeo=new BMap.Geocoder();
		myGeo.getPoint(GLOBAL.area,function(point){
			if(point){
				GetMapShopList(map, "", "", point.lng, point.lat, 15);
			}
		});
		
	});

	function GetMapShopList(map, searchStr, typeStr, lng, lat, Zoom) {
		//$.mask_element('#test_mask_2');
		map = new BMap.Map("map", {}); // 创建Map实例
		map.setMapStyle({
			style: 'googlelite'
		});
		map.centerAndZoom(new BMap.Point(lng, lat), Zoom); // 初始化地图,设置中心点坐标和地图级别
		map.setCurrentCity("绵阳"); // 设置地图显示的城市 此项是必须设置的
		map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
		//添加拖拽事件
		map.addEventListener("dragend", function(e) {
			var Zoom = map.getZoom();
			var lng = map.getCenter().lng;
			var lat = map.getCenter().lat;
			GetMapShopList(map, searchStr, typeStr, lng, lat, Zoom);
		});
		$.ajax({
			url: GLOBAL.URL + "/shopinfo/listTree",
			type: 'post',
			data: {
				"limit": 400,
				"page": 1,
				"name": searchStr,
				"industryCategory": typeStr,
				"lon": lng,
				"lan": lat
			},
			dataType: "json", //返会值的类型
			async: false,
			xhrFields: {
				withCredentials: true
			},
			crossDomain: true,
			success: function(datas, textStatus) { //请求成功执行的代码
				if(datas.code == 0) {
					var data = datas.page.list[0];
					for(var i = 0; i < data.length; i++) {
						var point = new BMap.Point(data[i].lon, data[i].lat);
						var marker = new BMap.Marker(point);
						map.addOverlay(marker);
						var label = new BMap.Label(data[i].data.length);
						if(data[i].data.length > 8) {
							label.setOffset(new BMap.Size(2, 3));
						} else {
							label.setOffset(new BMap.Size(5, 4));
						}
						label.setStyle({
							color: "#fff",
							fontSize: "10px",
							backgroundColor: "0.05",
							border: "0"
						});
						marker.setLabel(label);
						//添加点的点击事件
						marker.addEventListener("click", function(e) {
							var p = e.target;
							for(var k = 0; k < data.length; k++) {
								if(data[k].lon == p.getPosition().lng && data[k].lat == p.getPosition().lat) {
									var sContent = "<div style='overflow: auto;max-height:500px'>";
									if(data[k].data.length == 1) {
										for(var m = 0; m < data[k].data.length; m++) {
											data[k].data[m].picPath = data[k].data[m].picPath == null ? "img/shop.png" : data[k].data[m].picPath;
											data[k].data[m].cityName = data[k].data[m].cityName == null ? "" : data[k].data[m].cityName;
											data[k].data[m].countryName = data[k].data[m].countryName == null ? "" : data[k].data[m].countryName;
											data[k].data[m].town = data[k].data[m].town == null ? "" : data[k].data[m].town;
											data[k].data[m].village = data[k].data[m].village == null ? "" : data[k].data[m].village;
											data[k].data[m].villageNo = data[k].data[m].villageNo == null ? "" : data[k].data[m].villageNo;
											data[k].data[m].type = data[k].data[m].type == null ? "" : data[k].data[m].type;
											data[k].data[m].cell = data[k].data[m].cell == null ? "" : data[k].data[m].cell;
											data[k].data[m].landline = data[k].data[m].landline == null ? "未知" : data[k].data[m].landline;
											data[k].data[m].shopKeeper = data[k].data[m].shopKeeper == null ? "未知" : data[k].data[m].shopKeeper;

											sContent +=
												'<div style="width:290px;overflow: hidden;font-family:"微软雅黑">' +
												'<div style="padding-left:15px;font-size: 14px;height: auto;min-height:25px;border-bottom: 1px dashed #31708F;">' + data[k].data[m].name + '</div>' +
												'<div style="width:100%;text-align:center;padding-top:10px"><img src="'+data[k].data[m].picPath+'" style="margin:0px auto;" width="250" height="140"></div>' +
												'<div style="padding-left:20px ;padding-top: 10px;width: 100%;">' +
												'<div style="font-size: 12px;height: 25px;"><i class="fa fa-user" style="font-size:16px;margin-right:5px;color:#acbd6f"></i>店&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长：' + data[k].data[m].shopKeeper + '</div>' +
												'<div style="font-size: 12px;height: 25px;"><i class="fa fa-phone"  style="font-size:16px;margin-right:5px;color:#ffc271"></i>联系电话：' + data[k].data[m].landline + '</div>' +
												'<div style="font-size: 12px;"><i class="fa fa-map-marker" style="font-size:16px;margin-right:5px;color:#6ba7e5"></i>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：' + data[k].data[m].cityName + data[k].data[m].countryName + data[k].data[m].town + data[k].data[m].village + data[k].data[m].villageNo + data[k].data[m].cell + '</div>' +
												'</div>' +
												'</div>';
										}
									} else {
										var buildingName = data[k].data[0].buildingName == null ? "暂无" : data[k].data[0].buildingName;
										var SignCount = 0;
										for(var m = 0; m < data[k].data.length; m++) {
											if(data[k].data[m].marketingStatus == "已签约") {
												SignCount++;
											}
										}
										sContent +=
											'<div style="width:290px;overflow: hidden;font-family:"微软雅黑">' +
											'<div style="padding-left:15px;font-size: 18px;height: auto;min-height:25px;color:#9a7760"><b>' + buildingName + '</b></div>' +
											'<div style="padding-left:20px ;padding-top: 10px;width: 100%;">' +
											'<div style="font-size: 12px;height: 25px;"><i class="fa fa-building" style="font-size:16px;margin-right:5px;color:#acbd6f"></i>单&nbsp;位&nbsp;数：' + data[k].data.length + '</div>' +
											'<div style="font-size: 12px;height: 25px;"><i class="fa fa-bookmark" style="font-size:16px;margin-right:5px;color:#ffc271"></i>已签约数：' + SignCount + '</div>' +
											'</div>' +
											'</div>';
									}
									sContent += "</div>";
									var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
									this.openInfoWindow(infoWindow);
								}
							}
						});
					}
					//$.mask_close('#test_mask_2');
				} else if(datas.code == 403) {
					AlertInfo("操作失败！" + datas.msg);
					//$.mask_close('#test_mask_2');
					window.location.href = "login.html";
				} else {
					var msg = datas.msg == null ? "" : datas.msg;
					//$.mask_close('#test_mask_2');
					AlertInfo("请求失败！" + msg);
				}
			},
			error: function() {
				//json.errorfn();
			}

		});
	}
	//文本框查询
	function Search() {
		  var myGeo=new BMap.Geocoder();
		myGeo.getPoint(GLOBAL.area,function(point){
			if(point){
				GetMapShopList(map, $("#searchinfo").val(), "", point.lng, point.lat, 14);
			}
		});
	}
	//行业类别查询
	function SearchType() {
		var typeStr = "";
		var parentNode = $("#shopType").children();
		for(var i = 0; i < parentNode.length; i++) {
			if(parentNode[i].children[0].checked) {
				typeStr += parentNode[i].children[0].defaultValue + ",";
			}
		}
		if(typeStr != "") {
			typeStr = typeStr.substring(0, typeStr.length - 1);
		}
		 var myGeo=new BMap.Geocoder();
		myGeo.getPoint(GLOBAL.area,function(point){
			if(point){
				GetMapShopList(map, $("#searchinfo").val(), typeStr, point.lng, point.lat, 14);
			}
		});
		$("#collapseThree").removeClass("in");
	}

	function changeSpan() {
		if($("#iconspan").hasClass("fa-sort-asc")) {
			$("#iconspan").removeClass("fa-sort-asc");
			$("#iconspan").addClass("fa-sort-up");
		} else {
			$("#iconspan").addClass("fa-sort-asc");
			$("#iconspan").removeClass("fa-sort-up");
		}

	}

	//获取地图上统计信息
	function GetWeekInfo() {
		var url = "";
		if(GLOBAL.deptId == 1) {
			url = "/customer/areaWeekInfo";
		} else if(GLOBAL.deptId == 2) {
			url = "/customer/queryUserWeekInfo";
		}
		$.ajax({
			url: GLOBAL.URL + url,
			type: 'Get',
			dataType: "json", //返会值的类型
			async: false,
			xhrFields: {
				withCredentials: true
			},
			crossDomain: true,
			success: function(datas, textStatus) { //请求成功执行的代码
				if(datas.code == 0) {
					var data = datas.info;
					var signcount=data.weekInfo[0].signcount==null||data.weekInfo[0].signcount==-1?"暂无":data.weekInfo[0].signcount;
					var vistcount=data.weekInfo[0].vistcount==null||data.weekInfo[0].vistcount==-1?"暂无":data.weekInfo[0].vistcount;
					var count=data.weekInfo[0].count==null||data.weekInfo[0].count==-1?"暂无":data.weekInfo[0].count;
					var order=data.order==null||data.order==-1?"暂无":data.order;
					var signhotelcount=data.weekInfo[0].signhotelcount==null||data.weekInfo[0].signhotelcount==-1?"暂无":data.weekInfo[0].signhotelcount;
					var sourcebuildingcount=data.weekInfo[0].sourcebuildingcount==null||data.weekInfo[0].sourcebuildingcount==-1?"暂无":data.weekInfo[0].sourcebuildingcount;
					var signbuildingcount=data.weekInfo[0].signbuildingcount==null||data.weekInfo[0].signbuildingcount==-1?"暂无":data.weekInfo[0].signbuildingcount;
					var hotelcount=data.weekInfo[0].hotelcount==null||data.weekInfo[0].hotelcount==-1?"暂无":data.weekInfo[0].hotelcount;
					var sourcehotelcount=data.weekInfo[0].sourcehotelcount==null||data.weekInfo[0].sourcehotelcount==-1?"暂无":data.weekInfo[0].sourcehotelcount;
					var buildingcount=data.weekInfo[0].buildingcount==null||data.weekInfo[0].buildingcount==-1?"暂无":data.weekInfo[0].buildingcount;
					var mangercount=data.weekInfo[0].mangercount==null||data.weekInfo[0].mangercount==-1?"暂无":data.weekInfo[0].mangercount;
					var totalUser=data.weekInfo[0].totalUser==null||data.weekInfo[0].totalUser==-1?"暂无":data.weekInfo[0].totalUser;
					var hotelRooms=data.weekInfo[0].hotelRooms==null||data.weekInfo[0].hotelRooms==-1?"暂无":data.weekInfo[0].hotelRooms;
					var hotelSignRooms=data.weekInfo[0].hotelSignRooms==null||data.weekInfo[0].hotelSignRooms==-1?"暂无":data.weekInfo[0].hotelSignRooms;
					$("#signcount").html(signcount);
					$("#vistcount").html(vistcount);
					$("#count").html(count);
					$("#order").html(order);
					if(GLOBAL.deptId == 1) {
						$("#show").show();
						$("#signhotelcount").html(signhotelcount);
						$("#sourcebuildingcount").html(sourcebuildingcount);
						$("#signbuildingcount").html(signbuildingcount);
						$("#hotelcount").html(hotelcount);
						$("#sourcehotelcount").html(sourcehotelcount);
						$("#buildingcount").html(buildingcount);
						$("#mangercount").html(mangercount);
						$("#totalUser").html(totalUser);
						$("#hotelRooms").html(hotelRooms);
						$("#hotelSignRooms").html(hotelSignRooms);

					} else {
						$("#show").hide();
						$("#signhotelcount").parent().parent().hide();
						$("#signbuildingcount").parent().parent().hide();
						$("#sourcebuildingcount").parent().parent().hide();
						$("#hotelcount").parent().parent().hide();
						$("#sourcehotelcount").parent().parent().hide();
						$("#buildingcount").parent().parent().hide();
						$("#mangercount").parent().parent().hide();
						$("#totalUser").parent().parent().hide();
						$("#hotelRooms").parent().parent().hide();
						$("#hotelSignRooms").parent().parent().hide();
						$("#Info").height(85);
						$("#mapBox").height(696);
						$("#map").height(696);

					}

				}
			}
		})
	}

	//地图信息展开收起
	function showMapInfo(info) {
		var MapInfoNodeList = $("#Info").children();
		if(info == 0) {
			for(var i = 0; i < MapInfoNodeList.length; i++) {
				if(i != 0) {
					$(MapInfoNodeList[i]).css("display", "none");
				}
			}
			$("#show").html("<span onclick=showMapInfo('1') style='color: #5FB9F4;cursor: pointer;'><i class='fa fa-arrow-circle-down'  style='margin-right: 10px'></i>展开</span>")
			$("#Info").height(85);
			$("#mapBox").height(666);
			$("#map").height(666);
			$("#mapInput").css("margin-top", "30px");
			$("#mapSearch").css("margin-top", "30px");
		} else {
			for(var i = 0; i < MapInfoNodeList.length; i++) {
				if(i != 0) {
					$(MapInfoNodeList[i]).css("display", "block");
				}
			}
			$("#show").html("<span onclick=showMapInfo('0')  style='color: #5FB9F4;cursor: pointer;'><i class='fa fa-arrow-circle-up'  style='margin-right: 10px'></i>收起</span>")
			$("#Info").height(225);
			$("#mapBox").height(526);
			$("#map").height(526);
			$("#mapInput").css("margin-top", "31px");
			$("#mapSearch").css("margin-top", "31px");
		}
	}
</script>